<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>用户管理</title>
	{css href="/static/admin/component/pear/css/pear.css"}
	<style>
		.layui-form-label {
			width: auto;
		}
	</style>
</head>

<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">学科名称</label>
						<div class="layui-input-inline">
							<input type="text" name="courseName" placeholder="请输入学科名称" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">学生姓名</label>
						<div class="layui-input-inline">
							<select name="studentId" lay-search>
								<option value="">请选择学生</option>
								{volist name="student" id="stu"}
								<option value="{$stu.student_id}">{$stu.student_name}</option>
								{/volist}
							</select>
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="user-table" lay-filter="user-table"></table>
		</div>
	</div>

	<script type="text/html" id="user-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
			<i class="layui-icon layui-icon-add-1"></i>
			新增
		</button>
		<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
			<i class="layui-icon layui-icon-delete"></i>
			删除
		</button>
	</script>

	<script type="text/html" id="user-bar">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
				class="layui-icon layui-icon-edit"></i></button>
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
				class="layui-icon layui-icon-delete"></i></button>
	</script>

	<script type="text/html" id="add-createTime">
		{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
	</script>

	<script type="text/html" id="add-form">
		<form class="layui-form" lay-filter="course">
			<div class="mainBox">
				<div class="main-container">
					<div class="main-container">
						<input type="hidden" name="id">
						<div class="layui-form-item">
							<label class="layui-form-label">学科名称</label>
							<div class="layui-input-block">
								<input type="text" name="courseName" lay-verify="required" autocomplete="off"
									placeholder="请输入标题" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">课代表</label>
							<div class="layui-input-block">
								<select name="studentId" lay-verify="required" lay-search>
									{volist name="student" id="stu"}
									<option value="{$stu.student_id}">{$stu.student_name}</option>
									{/volist}
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="user-save">
						<i class="layui-icon layui-icon-ok"></i>
						提交
					</button>
					<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
	</script>


	{js href="/static/admin/component/layui/layui.js"}
	{js href="/static/admin/component/pear/pear.js"}
	<script>
		layui.use(['table', 'form', 'jquery', 'popup'], function () {
			let table = layui.table;
			let form = layui.form;
			let popup = layui.popup;
			let $ = layui.jquery;

			let MODULE_PATH = "operate/";

			let cols = [
				[{
						type: 'checkbox'
					},
					{
						title: 'ID',
						field: 'course_id',
						align: 'center',
						width: 80
					},
					{
						title: '学科名称',
						field: 'course_name',
						align: 'center',
						minWidth: 180
					},
					{
						title: '资源文件夹',
						field: 'course_path',
						align: 'center',
						minWidth: 220
					},
					{
						title: '课代表名称',
						field: 'student_name',
						align: 'center',
						minWidth: 180
					},
					{
						title: '添加时间',
						field: 'task_course_time',
						align: 'center',
						templet: '#add-createTime',
						minWidth: 180
					},
					{
						title: '操作',
						toolbar: '#user-bar',
						align: 'center',
						width: 130
					}
				]
			]

			table.render({
				elem: '#user-table',
				url: '/api/v1/course/list',
				page: true,
				cols: cols,
				skin: 'line',
				toolbar: '#user-toolbar',
				defaultToolbar: [{
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports']
			});

			table.on('tool(user-table)', function (obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				}
			});

			table.on('toolbar(user-table)', function (obj) {
				if (obj.event === 'add') {
					window.add();
				} else if (obj.event === 'refresh') {
					window.refresh();
				} else if (obj.event === 'batchRemove') {
					window.batchRemove(obj);
				}
			});

			form.on('submit(user-query)', function (data) {
				table.reload('user-table', {
					where: data.field
				})
				return false;
			});

			// 添加保存
			form.on('submit(user-save)', function (data) {
				// 实例化表单
				var info = new FormData();
				info.append('courseName', data.field.courseName);
				info.append('studentId', data.field.studentId);
				var aurl = "/api/v1/course/addinfo";

				if (data.field.id) {
					aurl = "/api/v1/course/editinfo";
					info.append('id', data.field.id);
				}

				$.ajax({
					url: aurl,
					type: "post",
					dataType: "json",
					contentType: 'application/x-www-form-urlencoded;charset=utf-8',
					data: info,
					contentType: false, //不设置内容类型
					processData: false, //不处理数据
					beforeSend: function () {},
					success: function (data) {
						if (data.code == 200) {
							popup.success(data.msg, function () {
								layer.closeAll();
								window.refresh()
							});
						} else {
							popup.warming(data.msg, function () {});
						}
					},
					error: function (XMLResponse) {
						//异常捕获
						// layer.msg(XMLResponse.responseText);
						popup.warming("网络异常", function () {});
					}
				});
				return false;
			});

			// 打开添加框
			window.add = function () {
				layer.open({
					type: 1,
					title: '新增',
					shade: 0.1,
					area: ['320px', '220px'],
					content: $("#add-form").html(),
					success: function (layero, index) {
						console.log(layero, index);
						form.render()
					}
				});
			}

			// 打开编辑框
			window.edit = function (obj) {
				console.log(obj);
				layer.open({
					type: 1,
					title: '修改',
					shade: 0.1,
					area: ['320px', '220px'],
					content: $("#add-form").html(),
					success: function (layero, index) {
						form.val('course', {
							courseName: obj.data.course_name,
							studentId: obj.data.student_id,
							id: obj.data.course_id
						});
						form.render()
					}
				});
			}

			// 单选删除
			window.remove = function (obj) {
				layer.confirm('确定要删除该用户', {
					icon: 3,
					title: '提示'
				}, function (index) {
					layer.close(index);
					let loading = layer.load();
					var info = new FormData();
					info.append('ids', obj.data.course_id);
					$.ajax({
						url: "/api/v1/course/delinfo",
						type: "post",
						dataType: "json",
						contentType: 'application/x-www-form-urlencoded;charset=utf-8',
						data: info,
						contentType: false, //不设置内容类型
						processData: false, //不处理数据
						beforeSend: function () {},
						success: function (data) {
							layer.close(loading);
							if (data.code == "200") {
								layer.msg(data.msg, {
									icon: 1,
									time: 1500
								}, function () {
									obj.del();
									// window.refresh()
								});
							} else {
								layer.msg(data.msg, {
									icon: 2,
									time: 1000
								});
							}
						},
						error: function (XMLResponse) {
							//异常捕获
							// layer.msg(XMLResponse.responseText);
							popup.warming("网络异常", function () {});
						}

					})
				});
			}

			// 多选删除
			window.batchRemove = function (obj) {
				let data = table.checkStatus(obj.config.id).data;
				if (data.length === 0) {
					layer.msg("未选中数据", {
						icon: 3,
						time: 1000
					});
					return false;
				}
				let ids = [];
				for (let i = 0; i < data.length; i++) {
					if (data[i].course_id) {
						ids[i] = data[i].course_id
					}
				}
				layer.confirm('确定要删除这些用户', {
					icon: 3,
					title: '提示'
				}, function (index) {
					layer.close(index);
					let loading = layer.load();
					var info = new FormData();
					info.append('ids', ids);
					$.ajax({
						url: "/api/v1/course/delinfo",
						type: "post",
						dataType: "json",
						contentType: 'application/x-www-form-urlencoded;charset=utf-8',
						data: info,
						contentType: false, //不设置内容类型
						processData: false, //不处理数据
						beforeSend: function () {},
						success: function (data) {
							layer.close(loading);
							if (data.code == "200") {
								layer.msg(data.msg, {
									icon: 1,
									time: 1500
								}, function () {
									table.reload('user-table');
								});
							} else {
								layer.msg(data.msg, {
									icon: 2,
									time: 1000
								});
							}
						},
						error: function (XMLResponse) {
							//异常捕获
							// layer.msg(XMLResponse.responseText);
							popup.warming("网络异常", function () {});
						}
					})
				});
			}

			// 列表刷新
			window.refresh = function (param) {
				table.reload('user-table');
			}
		})
	</script>
</body>

</html>